<template>
  <!-- 这里是意向客户页面 -->
  <div class="potentialClients">
    <el-card class="clients-search">
      <el-row>
        <el-col :span="10">
          <el-input placeholder="您可以使用姓名、手机号、微信、qq及客服信息进行搜索"        v-model="searchInput"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-search" @click="searchClick">搜索</el-button>
        </el-col>
      </el-row>  
    </el-card>
    <!-- 展示表格数据 -->
    <el-row>
      <el-table 
        border
        stripe
        :data="tableList"
      >
        <el-table-column label="编号" prop="bianhao" width="50"></el-table-column>
        <el-table-column label="姓名" prop="nickname"></el-table-column>
        <el-table-column label="日期" width="200">
           <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="120" prop="contact"></el-table-column>
        <el-table-column label="微信" prop="weixin"></el-table-column>
        <el-table-column label="QQ" prop="qq"></el-table-column>
        <el-table-column label="专业" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.zhuanye}}</span>
            <span class="info-class">{{ scope.row.infoclass}}</span>
          </template>
        </el-table-column>
        <el-table-column label="信息来源" width="100" prop="laiyuan"></el-table-column>
        <el-table-column label="客服" width="80" prop="kefu"></el-table-column>
        <el-table-column label="地区"  width="100" prop="dizhi"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
            <el-button type="primary" @click="changeClick(scope.row)" icon="el-icon-edit" size="small"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button @click="delClick(scope.row.id)" icon="el-icon-delete" type="danger" size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-row>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableNum">
          </el-pagination>
        </div>
    </el-row>

    <!-- 这里是修改弹出组件 -->
    <change-data1 v-if="isShow" :changeObj="changeObj"
    @closePage="closePage"
    ></change-data1>
  </div>
</template>

<script>
import { getYxkh , delOneData } from "../../network/api/api"
import { home_mixins } from "../../utils/mixins"
import ChangeData1 from "../../components/ChangeData1"

export default {
  name:"PotentialClients",
  mixins:[ home_mixins ],
  components:{
    ChangeData1
  },
  data() {
    return {
      tableList:[],
      tableNum:0,
      isShow:false,
      changeObj:{},
      searchInput:"",
      currentPage: 1,
      pageSize:20,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 搜索按钮的事件函数
    searchClick(){
      this.getList()
      // getYxkh({
      //   num:"20",
      //   page:"1",
      //   keyword:this.searchInput
      // }).then(res => {
      //   this.tableList = res.data.results
      //   this.tableList = this.tableList.map((item,index)=>{
      //     item.bianhao = index + 1
      //     item.time = this.setDate(item.posttime,"-")
      //     return item
      //   })
      //   this.tableNum = res.data.num
      // })
    },
    // 关闭页面事件函数
    closePage(boo){
      this.isShow = boo
      this.getList()
    },
    // 删除按钮事件函数
    delClick(id){
      delOneData(id).then(res => {
        if(res.data.code == "200"){
         this.getList()
        }else{
          this.$message.error("删除失败，请重新尝试")
        }
      })
    },
    // 获取意向客户数据方法
    getList(){
      getYxkh({
        num:this.pageSize,
        page:this.currentPage,
        keyword:this.searchInput
      }).then(res => {
        console.log(res)
        this.tableList = res.data.results
        this.tableList = this.tableList.map((item,index)=>{
          item.bianhao = index + 1
          item.time = this.setDate(item.posttime,"-")
          return item
        })
        this.tableNum = res.data.num
      })
    },
    // 修改按钮事件函数
    changeClick(obj){
      // for(let i in obj){
      //   this.changeObj[i] = obj[i]
      // }     
      this.changeObj = JSON.parse(JSON.stringify(obj))
      // this.changeObj = obj
      console.log(this.changeObj)
      this.isShow = true
    },
    //每页条数发生变化时的函数
    handleSizeChange(n){
      // console.log(n)
      this.pageSize = n
      this.getList()
    },
    //当前页发生变化时的函数
    handleCurrentChange(n){
      // console.log(n)
      this.currentPage = n
      this.getList()
    }
  },
}
</script>

<style lang="less" scoped>
  .potentialClients{
    height: 100%;
  }
  .clients-search{
    .el-button{
      width: 100px;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      color: #2389f5;
      &:hover{
        background: #409EFF;
        color: #fff;
      }
    }
    
  }
  .el-table_1_column_7{
    position: relative;
    .info-class{
      font-size: 8px;
      color: #2389f5;
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }
  .block{
    height: 100px;
    background: #fff;
    .el-pagination{
      width: 750px;
      margin: 50px  auto;
    }
  }
</style>